<template>
  <div class="product-detail">
    <swiper :options="swiperOption">
      <swiper-slide :style="{backgroundImage: 'url('+ list[0] +')' }"></swiper-slide>
      <swiper-slide :style="{backgroundImage: 'url('+ list[1] +')' }"></swiper-slide>
      <swiper-slide :style="{backgroundImage: 'url('+ list[2] +')' }"></swiper-slide>
      <!--<swiper-slide :style="{backgroundImage: 'url('+ list[3] +')' }"></swiper-slide>-->
      <!--<swiper-slide :style="{backgroundImage: 'url('+ list[4] +')' }"></swiper-slide>-->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!--{{currentProduct}}-->
    <div class="product-title">
      {{currentProduct.name}}
    </div>
    <div class="product-price-line">
      <span class="price-lable">￥{{currentProduct.memberPrice}}</span>
      <span class="promotion-title">抢购价</span>
    </div>
    <div class="attach-info-line">
      <span class="attach-price">
        原价：
        <s>{{currentProduct.price}}</s>
      </span>
      <span class="lbl-attach">快递：包邮</span>
      <span class="lbl-attach">已售出188份</span>
      <span class="lbl-attach right-location">四川成都</span>
    </div>
    <div class="product-tabs">
      <div class="product-tab-items">商品详情</div>
      <div class="select-amount">
        <span class="minus-amount" @touchstart="minusAmount">-</span>
        <input type="number" class="input-number" readonly v-model="amount" />
        <span class="add-amount" @touchstart="addAmount">+</span>
      </div>
    </div>
    <div class="multiText-container">

    </div>
    <div class="bottom-layer">
      <div class="cart">
        <mt-badge type="warning" size="large" class="cart-badge" v-if="cartCounter > 0">{{cartCounter}}</mt-badge>
        <i class="fa fa-cart-plus my-cart" aria-hidden="true"></i>
        <span class="title-message">共计：{{price * amount | toFixed2}}元</span>
      </div>
      <div class="add-cart" @click="handle">加入购物车</div>
    </div>
  </div>
</template>

<script>
  import querystring from 'querystring'
  import productApi from '@/api/index'
  import cartApi from '@/api/cart'
  export default {
    name: 'ProductDetail',
    props: {
      productId: {
        type: Number
      }
    },
    methods: {
      handle() {
        /**
         * 写死的用户ID
         * @type {number}
         */
        var memberId = 2
        cartApi.addProductInCart({
          memberId,
          amount: this.amount,
          productId: this.params.productId
        }).then(response => {
          this.$Central.$emit('loading', false)
          if (response.data.code == 0) {
            this.$Central.$emit('loading', true)
            window.location.href = 'shopping_trolley.html'
          } else {
            this.$Utils.$toast('添加购物车失败，失败信息:' + response.data.message)
          }
        }, err => {
          this.$Central.$emit('loading', false)
          this.$Utils.$toast('系统错误，添加购物车失败')
        })
      },
      addAmount() {
        this.amount++
      },
      minusAmount() {
        if (this.amount >= 2) {
          this.amount--
        }
      }
    },
    mounted() {
      var params = querystring.parse(window.location.search.replace(/^\?/g, ''))
      params.productId = 10;
      var memberId = 2
      if (params.productId) {
        this.params.productId = params.productId
        this.$Central.$emit('loading', true)
        productApi.getProductDetail(params.productId).then(response => {
          if (response.data.code == 0) {
            this.currentProduct = Object.assign({}, this.currentProduct, response.data.data)
            this.price = response.data.data.memberPrice;
            for (var i = 0;i < response.data.data.productImages.length; i++) {
              var  rows = response.data.data.productImages[i];
              var imgUrl = rows.large;
              this.list.push(imgUrl)
            }
            return cartApi.getCartProducts(memberId)
          } else {
            this.$Utils.$toast('获取商品信息失败，错误信息:' + response.data.message)
          }
        }, err => {
          this.$Central.$emit('loading', false)
          this.$Utils.$toast('系统错误，获取商品信息失败!')
        }).then(response => {
          this.$Central.$emit('loading', false)
          if (response.data.code == 0) {
            this.cartCounter = response.data.data.length
          } else {
            this.$Utils.$toast('获取购物车信息失败，错误信息:' + response.data.message)
          }
        }, err => {
          this.$Central.$emit('loading', false)
          this.$Utils.$toast('系统错误，拉去购物车信息失败!')
        })
      }
    },
    data() {
      return {
        cartCounter: 0,
        params: {},
        amount: 1,
        price: 0,
        currentProduct: {},
        list: [],
        swiperOption: {
          loop: true,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  @import "../assets/css/variable";
  @import "../assets/css/px2rem";

  .product-detail {
    height: auto;
    position: relative;
    .swiper-container {
      height: px2rem(1000px);
    }
    .swiper-slide {
      height: px2rem(1000px);
    }
    .product-title {
      width: 100%;
      box-sizing: border-box;
      padding: px2rem(40px) px2rem(40px) 0 px2rem(40px);
      height: auto;
      font-size: 0.8rem;
      color: #5b5b5b;
    }

    .product-price-line {
      height: px2rem(150px);
      margin-top: px2rem(15px);
      padding-left: px2rem(40px);
    }

    .price-lable {
      color: $theme-color;
      margin-top: px2rem(20px);
      float: left;
    }

    .promotion-title {
      width: auto;
      height: px2rem(60px);
      border: 2px solid $theme-color;
      font-size: 0.6rem;
      color: $theme-color;
      border-radius: 5px;
      padding: px2rem(10px);
      float: left;
      margin-left: px2rem(40px);
    }

    .attach-info-line {
      width: auto;
      padding: 0 px2rem(40px) 0px px2rem(40px);
      height: auto;
    }

    .attach-price {
      display: block;
      color: #999;
      font-size: 0.6rem;
    }

    .lbl-attach {
      @extend .attach-price;
      width: 33%;
      float: left;
      display: inline-block;
      margin-top: px2rem(5px);
    }

    .right-location {
      text-align: right;
    }

    .product-tabs {
      float: left;
      width: 100%;
      height: px2rem(155px);
      margin-top: px2rem(60px);
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      position: relative;
    }
    .product-tab-items {
      float: left;
      width: 30%;
      height: px2rem(155px);
      font-size: 0.9rem;
      color: #5b5b5b;
      text-align: center;
      line-height: px2rem(155px);
      box-sizing: border-box;
      border-right: 1px solid #ccc;
      border-bottom: 5px solid #FF7B00;
    }

    .select-amount {
      position: absolute;
      width: px2rem(300px);
      display: block;
      top: px2rem(20px);
      height: px2rem(110px);
      right: px2rem(40px);
      border: 1px solid #ccc;
    }

    .minus-amount,
    .add-amount {
      float: left;
      height: 100%;
      width: 30%;
      text-align: center;
      line-height: px2rem(110px);
      font-size: 0.6rem;
      &:active {
        box-shadow: inset 0 0 5px #ccc;
      }
    }

    .input-number {
      width: 40%;
      float: left;
      height: 100%;
      border: none;
      margin: 0;
      padding: 0;
      outline: none;
      border-left: 1px #ccc solid;
      border-right: 1px #ccc solid;
      box-sizing: border-box;
      line-height: px2rem(110px);
      font-size: 0.7rem;
      text-align: center;
      color: #5b5b5b;
    }

    .add-amount {
      float: right;
    }

    .multiText-container {
      padding: px2rem(40px);
      height: px2rem(1000px);
      float: left;
    }

    .bottom-layer {
      position: fixed;
      z-index: 100;
      right: 0;
      bottom: 0;
      border-top: 1px solid #ccc;
      height: px2rem(179px);
      width: 100%;
      .cart {
        float: left;
        width: 60%;
        height: px2rem(179px);
        background-color: $theme-color;
        position: relative;
      }

      .cart-badge {
        position: absolute;
        left: 2.2rem;
        top: px2rem(-10px);
      }

      .title-message {
        float: right;
        color: yellow;
        font-size: 0.8rem;
        text-align: right;
        line-height: px2rem(179px);
        margin-right: px2rem(30px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: px2rem(450px);
      }

      .my-cart {
        color: white;
        font-size: 1.8rem;
        line-height: px2rem(179px);
        margin-left: px2rem(30px);
      }

      .add-cart {
        float: right;
        width: 40%;
        color: white;
        font-size: 0.85rem;
        background: $theme-color-deep;
        height: px2rem(179px);
        line-height: px2rem(179px);
        text-align: center;
      }
    }

  }

</style>
